<template>
	<view class="move">
		<view class="ey same">
			<text class="car">停车场</text>
			<view class="put">
				<up-input placeholder="请输入停车场名称" border="surround" v-model="name" @blur="checkname"></up-input>
			</view>
		</view>

		<view class="ey same">
			<text class="car">备注</text>
			<view class="put">
				<up-input placeholder="请输入备注" border="surround" v-model="remark" @blur="checkremark"></up-input>
			</view>
		</view>

		<view class="ey same">
			<text class="car">停车位数</text>
			<view class="put">
				<up-input placeholder="请输入停车位数" border="surround" v-model="spotCount" @blur="checkcount"></up-input>
			</view>
		</view>

		<view class="ey same">
			<text class="car">问题描述</text>
			<view class="put">
				<u--textarea v-model="content" placeholder="请输入详细问题" count  @blur="checkcontent"></u--textarea>
			</view>
		</view>

		<view class="ey same">
			<text class="car">纠错照片</text>
			<view class="put">
				<u-upload :fileList="fileList1" name="img" multiple :maxCount="1" @afterRead="afterRead"
					@delete="deletePic" />
			</view>
		</view>

		<up-button type="primary" text="提交" @click="getsub"></up-button>

	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import {gocorrect} from '@/api/parkApi.js'

	const fileList1 = ref([]) //图片路径 显示在页面上
	const name = ref() //停车场名字
	const remark = ref() //备注
	const spotCount = ref() //停车位数
	const content = ref() //问题描述
	const imgurl = ref() //图片地址

    //失去焦点触发
	const check=(val)=>{
			
		if(val==undefined){
			uni.showToast({
				title:'内容不能为空',
				icon:'error'
			})
		}
	}
	
    //失去焦点检查停车场名称
	const checkname=()=>{
		check(name.value)
	}
	
	//失去焦点检查备注
	const checkremark=()=>{
		check(remark.value)
	}

    //失去焦点检查车位
    const checkcount=()=>{
    	check(spotCount.value)
    }
	
	//失去焦点检查问题描述
	const checkcontent=()=>{
		check(content.value)
	}


	//新增照片
	const afterRead = (e) => {
		
		imgurl.value = e.file[0].url //将图片地址保存
		// fileList1.value.push({url:e.file[0].url})   多张图片
		fileList1.value = [{
			url: e.file[0].url
		}]                        //将图片显示到页面上
	}

	//删除照片
	const deletePic = (e) => {
		fileList1.value.splice(e.index, 1)
	}

	//提交申请
	const getsub = async () => {

		if (name.value == undefined || remark.value == undefined || spotCount.value == undefined || content.value ==
			undefined || imgurl.value==undefined ) {
             uni.showToast({
             	title:'内容不能为空',
				icon:'error'
             })
             return;
		}
		//图片先提交变成网络地址
		uni.uploadFile({
			url: 'http://124.93.196.45:10001/prod-api/common/upload', //接口地址
			filePath:imgurl.value,
			name: 'file',
			header:{
			"Authorization":uni.getStorageSync('token')
			},
			formData:{},
			
			success: async(res) => {
             
			 if(res.statusCode==200){
				  //成功返回 拿到网络地址
				let imgdata= JSON.parse(res.data) 
				console.log(imgdata.fileName);
				
				 //掉申请挪车接口
				let res1 = await gocorrect({
					header:{
						"Authorization":uni.getStorageSync('token')
					},
					data:{
						name:name.value,
						remark:remark.value,
						spotCount:spotCount.value,
						content:content.value,
						photo:'http://124.93.196.45:10001/prod-api/'+imgdata.fileName   //图片进行拼接 基路径
					}
				})
				console.log(res1);
				 if(res1.code==200){
					uni.showToast({
						title:'提交成功'
					})
					
					uni.navigateTo({
						url:'/pages/park/index'
					})
					
				}else{
					
					//静态数据
					uni.showToast({
						title:'提交成功'
					})
					
					uni.navigateTo({
						url:'/pages/park/index'
					})
					
				}
				
				
			 }
				
			}
		})


	}
	
</script>
<style lang="scss">
	.move {
		padding: 8px 14px;

		.ey {
			display: flex;
			align-items: center;

			.car {
				flex: 1;
				font-size: 18px;
				font-weight: 700;
				text-align-last: justify;
				margin-right: 14px;

			}

			.put {
				flex: 3;
			}
		}

		.same {
			margin: 10px 0px;
		}

		::v-deep .u-button {
			margin: 10px 0px;
		}
	}
</style>